<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<head th:include="include :: header"></head>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=93e22b34db78a1c1fd467a663ee7592f&plugin=AMap.ToolBar"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

<style type="text/css">
	#mapContainer{
		margin:0;
		height:100%;
		width:100%;
		font-size:12px;
	}
	.container-div.ui-layout-center.map{
		padding-left: 15px;
		padding-right: 15px;
	}
	button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
	/*input#keyword {
		width: 110px;
		vertical-align: middle;
		line-height: 24px;
		height: 26px;
		border: 1px solid #bbb;
		padding: 0 4px;
	}*/
	input#byqInde {
		width: 117px;
	}
	div#fenYe {
		width: 100%;
		height: 25px;
	}
	div#search {
		margin-bottom: 10px;
	}
	input#first {
		margin-left: 45px;
	}
	input.ongImg {
		margin-left: 5px;
	}
	.YN{
		width: 200px;
		height: 50px;
	}
	#s4 hr{
		width: 100px;
		height: 5px;
		float: right;
		margin: 5px 15px;
		background-color:black;
	}#s2 hr{
		width: 100px;
		height: 5px;
		float: right;
		margin: 5px 15px;
		background-color:#64B464;
	}
</style>
<body class="gray-bg">



	<!-- 线路Tree -->
	<div class="ui-layout-west">
		<div class="main-content">
			<div class="box box-main">
				<div class="box-header">
					<div class="box-title">
						<i class="fa icon-grid"></i> 变压器列表
					</div>
					<div class="box-tools pull-right">
						<!--<a type="button" class="btn btn-box-tool menuItem" href="#" onclick="" title="管理线路"><i class="fa fa-edit"></i></a>-->
						<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
						<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
						<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新线路"><i class="fa fa-refresh"></i></button>
					</div>
				</div>
				<div class="treeSearchInput" id="search">
					<label >变压器：</label><input type="text" class="empty" id="byqInde" maxlength="50" placeholder="请输入变压器名称">
					<button class="btn" id="btn" onclick="searchNode()"> 搜索 </button>
					<!--<label >变压器：</label><input type="text" class="empty" id="keyword" maxlength="50">-->
					<!--<button class="btn" id="btn" onclick="$.tree.searchNode()"> 搜索 </button>-->
				</div>
				<!-- 线路分支Tree -->
				<div class="ui-layout-content">
					<div id="tree" class="ztree"></div>
				</div>
				<!-- 分页显示 -->
				<div class="fenYe" id="fenYe">
					<input type="image" id="first" class="ongImg" name="first" th:src="@{/imgs/fy/first.png}" onclick="first()">
					<input type="image" id="prev" class="ongImg" name="prev" th:src="@{/imgs/fy/per.png}" onclick="prev()">
					<input type="image" id="next" class="ongImg" name="next" th:src="@{/imgs/fy/next.png}" onclick="next()">
					<input type="image" id="last" class="ongImg" name="last" th:src="@{/imgs/fy/last.png}" onclick="last()">
				</div>
			</div>
		</div>
	</div>

	<!--
				 -->
	<div class="container-div ui-layout-center map">
		<div id="mapContainer" ></div>
		<div class="button-group YN" id='button_group' style='top:15px;bottom:inherit'>

			<!--<input type="button" class="button" value="显示/隐藏交跨"  onclick="Display&HideJcky()"/>-->
			<input type="button" class="button"  value="显示/隐藏拉线" onclick="Display_Hide_Pull()"/>
			<input type="button" class="button" value="显示/隐藏档距" onclick="Display_Hide_Span()"/>
			<label id="s4">400v<hr /></label>
			<label id="s2">220v<hr /></label>

		</div>
	</div>


<div th:include="include :: footer"></div>
	<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
	<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
    <script th:inline="javascript">
		var byq = null;
        var map = null;

        var lxArray = [];
        var spanArray = [];
        var xlNameArray = [];

        var count = 0;		//	总条数
        var pageLast = 0;	//	末页
        var pageSize = 15;	//	每页显示条数
        var ac = 1;

        $(document).ready(function(){
            queryDeptTree(1);
        });

        $(function() {

            /**
			 * Tree样式
			 */
            var panehHidden = false;
            if ($(this).width() < 769) {
                panehHidden = true;
            }
            $('body').layout({ initClosed: panehHidden, west__size: 185 });


            /**
			 * 	线路分支Tree
			 */
//            queryDeptTree(1);



            /**
			 * 	地图同步加载。。
             */
            map = new AMap.Map('mapContainer',{
                expandZoomRange:true,
                zoom:20,	//	缩放级别[3,18]
                zooms:[3,20],
                center:[107.545837,33.222739]	//	洋县
//                center:[104.15154756,30.62610420]	//	万科
            });

        });

        
        /**
		 * 	搜索变压器
		 */ 
		function searchNode() {
//            count = ;
			var byqInde = $("#byqInde").val();
//			console.log("byqInde=="+byqInde)
            var url = ctx + "assets/bByq/byqTreeData?page=1&byqName="+byqInde;

            var options = {
                url: url,
                expandLevel: 10,//展开等级节点
                check: {
                    enable: false,             // 置 zTree 的节点上是否显示 checkbox / radio
                    nocheckInherit: true,      // 设置子节点是否自动继承
                },
                view:{
                    nameIsHTML: true,
                    addDiyDom: addDiyDom	//	节点上固定显示用户自定义控件
                },
                onClick : zOnClick
            };
            $.tree.init(options);
        }
        
        /**
         * 	变压器作为根节点tree  --  低压线路  --  支线
         */
        function queryDeptTree(n)
        {
            var byqInde = $("#byqInde").val();
            var url = ctx + "assets/bByq/byqTreeData?page="+n+"&byqName="+byqInde;

            var options = {
                url: url,
                expandLevel: 10,//展开等级节点
                check: {
                    enable: false,             // 置 zTree 的节点上是否显示 checkbox / radio
                    nocheckInherit: true,      // 设置子节点是否自动继承
                },
				view:{
                    nameIsHTML: true,
                    addDiyDom: addDiyDom	//	节点上固定显示用户自定义控件
				},
//				callback:{
//                    onAsyncSuccess:zTreeOnAsyncSuccess
//				},
                onClick : zOnClick,
            };
            $.tree.init(options);
        }

		/**
		 * 	点击线路显示对应线路地理走向图
		 */
        function zOnClick(event,treeId, treeNode) {

//            console.log("treeNode=="+JSON.stringify(treeNode))

            var lineId;
            var lineName;
            var byqId;
            //	如果所选是变压器，则线路id和名称为空
            if(treeNode.level==0 || treeNode=='undefined'){
                byqId = treeNode.id;
                lineId = "";
                lineName = "";
                if(treeNode.lgt != null && treeNode.lat != null){
					map = new AMap.Map('mapContainer',{
						expandZoomRange:true,
						zoom:20,	//	缩放级别[3,18]
						zooms:[3,20],
						center:[treeNode.lgt,treeNode.lat]	//	wank
					});
				}else{
                    map = new AMap.Map('mapContainer',{
                        expandZoomRange:true,
                        zoom:20,	//	缩放级别[3,18]
                        zooms:[3,20],
                        center:[107.545837,33.222739]	//	wank
                    });
				}
			}else{// 低压线路主线或支线
				byqId = "";
                lineId = treeNode.id;
                lineName = treeNode.name;
			}

            $.ajax({
                cache : true,
                async : false,
                type : "POST",
                url : ctx + "assets/iLine/linePoint",
                data : {
                    "byqId":byqId,
                    "lineId": lineId,
                    "lineName": lineName
                },
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    map.clearMap();	//	清除所有覆盖物
					lxArray.splice(0,lxArray.length)
					spanArray.splice(0,spanArray.length);
                    xlNameArray.splice(0,xlNameArray.length);
					for(var i=0 ; i<data.length;i++) {

                        var imgURI = "";
                        if (data[i].type == "杆塔") {
                            imgURI = "/imgs/gt.png"
                        } else if (data[i].type == "变压器") {
                            imgURI = "/imgs/abc.png"
                        } else if (data[i].type == "表箱") {
                            imgURI = "/imgs/bx.png"
                        } else if (data[i].type == "电缆井") {
                            imgURI = "/imgs/dlj.png"
                        } else if (data[i].type == "交叉跨越") {
                            imgURI = "/imgs/jcky.png"
                        } else if (data[i].type == "同杆架设") {
                            imgURI = "/imgs/gt.png"
                        }else if (data[i].type == "下户点") {
                            imgURI = "/imgs/xhd.png"
                        }else if (data[i].type == "分支箱") {
                            imgURI = "/imgs/dlfzx.png"
                        }

                        //	点位描点
                        var marker = null;
//                        if(data[i].type!="同杆架设"){
							if (data[i].type == "变压器") {
								marker = new AMap.Marker({
									position: [data[i].lgt, data[i].lat],//	点位坐标
									offset: new AMap.Pixel(-20, -40),	//	相对偏移量
									icon: new AMap.Icon({				//	显示图标设置
										image: imgURI,
										size: new AMap.Size(60, 60),	//	图片大小
										imageSize: new AMap.Size(60, 60)
									}),
									label: {							 //	添加文本标注
										content: data[i].code,			//	点位编号
										offset: new AMap.Pixel(20, -30)
									},
									shape: new AMap.MarkerShape({		//	划定Marker的可点击区域范围
										coords: [0, 0, 40, 40],
										type: 'rect'						//	circle:圆形	poly:多边形 rect:矩形
									}),
								});
							} else if(data[i].type != "变压器" && data[i].type == "同杆架设") {
								marker = new AMap.Marker({
									position: [data[i].lgt, data[i].lat],//	点位坐标
									offset: new AMap.Pixel(-20, -40),	//	相对偏移量
									icon: new AMap.Icon({				//	显示图标设置
										image: imgURI,
										size: new AMap.Size(40, 40),	//	图片大小
										imageSize: new AMap.Size(40, 40)
									}),
									label: {							 //	添加文本标注
										content: data[i].code,			//	点位编号
										offset: new AMap.Pixel(20, -30)
									},
									shape: new AMap.MarkerShape({		//	划定Marker的可点击区域范围
										coords: [0, 0, 40, 40],
										type: 'rect'						//	circle:圆形	poly:多边形 rect:矩形
									}),
								});
							}else if(data[i].type != "变压器" && data[i].type != "同杆架设") {
								marker = new AMap.Marker({
									position: [data[i].lgt, data[i].lat],//	点位坐标
									offset: new AMap.Pixel(-20, -40),	//	相对偏移量
									icon: new AMap.Icon({				//	显示图标设置
										image: imgURI,
										size: new AMap.Size(40, 40),	//	图片大小
										imageSize: new AMap.Size(40, 40)
									}),
									label: {							 //	添加文本标注
										content: data[i].code,			//	点位编号
										offset: new AMap.Pixel(20, -30)
									},
									shape: new AMap.MarkerShape({		//	划定Marker的可点击区域范围
										coords: [0, 0, 40, 40],
										type: 'rect'						//	circle:圆形	poly:多边形 rect:矩形
									}),
								});
							}
							map.add(marker);

							//	点位传送值设置
							marker.extData = {
                                id:data[i].id,
                                type:data[i].type,
                                code:data[i].code,
                                byq_id:data[i].byqId,
                                line_id:data[i].lineId,
//                                task_id:data[i].taskId,
                                is_pole:data[i].isPole,
                                pole_id:data[i].poleId
							};

							marker.on("dblclick", showHtml);
//                    	}

						//	连线
//                        if(data[i].lowerId != null){

							for(var j=0;j<data.length;j++){

//								if(data[i].lowerId == data[j].id && data[j].upId == data[i].id){
								if(data[j].upId == data[i].id){
									var path = [
										new AMap.LngLat(data[i].lgt,data[i].lat),
										new AMap.LngLat(data[j].lgt,data[j].lat)
									];
                                    var polyline = null;
                                    if(data[j].voltage == "400v"){
                                        polyline = new AMap.Polyline({
                                            path: path,
                                            borderWeight: 2, // 线条宽度，默认为 1
                                            strokeColor: '#000000', // 线条颜色
                                            lineJoin: 'round' // 折线拐点连接处样式
                                        });
                                    }else if(data[j].voltage == "220v"){
                                        polyline = new AMap.Polyline({
                                            path: path,
                                            borderWeight: 2, // 线条宽度，默认为 1
                                            strokeColor: '#64B464', // 线条颜色
                                            lineJoin: 'round' // 折线拐点连接处样式
                                        });
                                    }else{
                                        polyline = new AMap.Polyline({
                                            path: path,
                                            borderWeight: 2, // 线条宽度，默认为 1
                                            strokeColor: '#C864C8', // 线条颜色
                                            lineJoin: 'round' // 折线拐点连接处样式
                                        });
                                    }

									//	标注档距
                                    var text = new AMap.Text({
                                        text:data[j].span,
                                        textAlign:'center', // 'left' 'right', 'center',
                                        verticalAlign:'middle', //middle 、bottom
                                        draggable:false,
                                        cursor:'pointer',
                                        position: [(data[i].lgt+data[j].lgt)/2,(data[i].lat+data[j].lat)/2],
                                        offset: new AMap.Pixel(-10, -10)
                                    });

                                    var xlName = new AMap.Text({
                                        text:data[j].lineName,
                                        textAlign:'center', // 'left' 'right', 'center',
                                        verticalAlign:'middle', //middle 、bottom
                                        draggable:false,
                                        cursor:'pointer',
                                        position: [(data[i].lgt+data[j].lgt)/2,(data[i].lat+data[j].lat)/2],
                                        offset: new AMap.Pixel(-10, -10)
                                    });

									map.add(polyline);
									map.add(text);
									spanArray.push(text);
                                    xlNameArray.push(xlName);
								}


							}
//						}

					}

					//	拉线描点
                    for(var k=0 ; k<data.length;k++){
					    if(data[k].pullNum !=null){
					        if(data[k].pullNum > 0){

                                var marker_pull = new AMap.Marker({
                                    position: [data[k].lxLgt,data[k].lxLat],//	点位坐标
                                    offset: new AMap.Pixel(-20, -40),	//	相对偏移量
                                    icon: new AMap.Icon({				//	显示图标设置
                                        image: "/imgs/lx.png",
                                        size: new AMap.Size(40, 40),	//	图片大小
                                        imageSize: new AMap.Size(40,40)
                                    }),
                                });

                                map.add(marker_pull);
                                lxArray.push(marker_pull);
							}
						}

					}



                }
            });
        }

        /**
		 * 	隐藏拉线
		 */
        var lx = 0;
		function Display_Hide_Pull() {
            if(lx % 2 == 0){
                map.remove(lxArray);
                map.setFitView();
                map.setZoom(20);
			}else{
                map.add(lxArray);
                map.setFitView();
                map.setZoom(20);
			}
			lx++;
        }

        /**
		 * 	隐藏档距
		 */
        var dj = 0;
		function Display_Hide_Span() {

            if(dj % 2 == 0){
                map.remove(spanArray);
                map.add(xlNameArray);
                map.setFitView();
                map.setZoom(20);
			}else{
                map.remove(xlNameArray);
                map.add(spanArray);
                map.setFitView();
                map.setZoom(20);
			}
			dj++;
        }

        /**
		 * 	点位点击事件
		 */
        function showHtml(e) {

            var id = e.target.extData.id;
            var type = e.target.extData.type;
//            var taskId = e.target.extData.task_id;
            var isPole = e.target.extData.is_pole;
            var poleId = e.target.extData.pole_id;
            var byqId = e.target.extData.byq_id;

            console.log("成果点击点位的类型===》》》"+type)

			var url = "";
			if(type=="杆塔" && isPole=="否"){
//			    url = ctx+'assets/iLine/showGt/'+id+"/"+taskId;
			    url = ctx+'assets/iLine/showGt/'+id;
				createMenuItem(url,type+'详情')
			} else if(type=="变压器"){
                url = ctx+'assets/iLine/showByq/'+id;
                createMenuItem(url,type+'详情')
            }else if(type=="下户点"){
                url = ctx+'assets/iLine/showXhd/'+id;
                createMenuItem(url,type+'详情')
            }else if(type=="分支箱"){
                url = ctx+'assets/iLine/showFzx/'+id;
                createMenuItem(url,type+'详情')
            }else if(type=="电缆井"){
//                url = ctx+'assets/iLine/showDlj/'+id+"/"+taskId;
                url = ctx+'assets/iLine/showDlj/'+id;
                createMenuItem(url,type+'详情')
            }else if(type=="表箱"){
//                url = ctx+'assets/iLine/showBx/'+id+"/"+taskId;
                url = ctx+'assets/iLine/showBx/'+id;
                createMenuItem(url,type+'详情')
            }else if(type=="交叉跨越"){
//                url = ctx+'assets/iLine/showJcky/'+id+"/"+taskId;
                url = ctx+'assets/iLine/showJcky/'+id;
                createMenuItem(url,type+'详情')
            }else if(type=="杆塔" && isPole=="是"){
                layer.open({
                    type: 2,
                    title: '同杆架设点位选择',
                    area: ['950px', '340px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: ctx+"assets/iPoint/choosePole?id="+id+"&isPole="+isPole+"&poleId="+poleId+"&byqId="+byqId+"&type="+type,
                    btn: ['确定', '关闭'],
                    // 弹层外区域关闭
                    shadeClose: true,
                    yes: function (index,layero) {
                        var body = layer.getChildFrame('body', index);//得到iframe页的body内容
                        id = body.find('#id').val();
//                        taskId = body.find('#task_id').val();
                        url = ctx+'assets/iLine/showGt/'+id;
                        createMenuItem(url,type+'详情')

                        layer.close(index);

                    },
                    cancel: function(index) {
                        return true;
                    }
                });

            }else if(type=="同杆架设" && isPole=="是"){
                layer.open({
                    type: 2,
                    title: '同杆架设点位选择',
                    area: ['950px', '340px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: ctx+"assets/iPoint/choosePole?id="+id+"&isPole="+isPole+"&poleId="+poleId+"&byqId="+byqId+"&type="+type,
                    btn: ['确定', '关闭'],
                    // 弹层外区域关闭
                    shadeClose: true,
                    yes: function (index,layero) {
                        var body = layer.getChildFrame('body', index);//得到iframe页的body内容
                        id = body.find('#id').val();
//                        taskId = body.find('#task_id').val();
                        url = ctx+'assets/iLine/showGt/'+id;
                        createMenuItem(url,type+'详情')

                        layer.close(index);

                    },
                    cancel: function(index) {
                        return true;
                    }
                });

            }


        }



		//	获取分页相关参数
        function addDiyDom(treeId, treeNode) {

//            if(ac==1){
//				console.log("treeNode=="+JSON.stringify(treeNode))
                count = treeNode.count;
                console.log("count=="+count)
				pageLast = Math.ceil(count/pageSize);//向上取整
//			}
//           ac++;
		}


		//	异步加载成功后事件
        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){
            alert("异步加载成功事件");
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            var nodes = treeObj.getNodes();
            if (nodes.length>0) {
                for(var i=0;i<nodes.length;i++){
                    if(i==0)
                        treeObj.expandNode(nodes[i], true, false, false);//默认展开第一级节点
                }
            }
        }



        /*function addDiyDom(treeId, treeNode) {
//			console.log("treeId11=="+JSON.stringify(treeId))
//          console.log("treeNode11=="+JSON.stringify(treeNode))
            var nowPage = 1;			// 当前页
//            var pageNum = nowPage*10-10;	// 从第几条开始查询
            var pageTotal = treeNode.count;			// 总条数
			console.log("总条数=="+pageTotal)
            var pageSize = 15;			// 每页显示条数
            var pageLast = 0;			//	 末页
                pageLast = Math.round(pageTotal/pageSize ) + (pageTotal % pageSize == 0 ? 0:1);
            console.log("末页=="+pageLast)


            $("#first").click(function () {
                console.log("首页11")
                queryDeptTree(nowPage);
            });

            $("#first").on("click", function(){	//	首页
                console.log("首页22")
                queryDeptTree(nowPage);
            });
            $("#last").bind("click", function(){	//	末页
                queryDeptTree(pageLast);
            });
            $("#prev").bind("click", function(){	//	上页
				if(nowPage==1){
				    console.log("当前上页为第一页时=="+nowPage)
                    queryDeptTree(nowPage);
				}else{
                    nowPage = nowPage-1;
                    console.log("当前上页不为第一页时=="+nowPage)
                    queryDeptTree(nowPage);
				}
            });
            $("#next").bind("click", function(){	//	下页
                nowPage = nowPage+1;
                console.log("下页=="+nowPage)
                queryDeptTree(nowPage);
            });
        };*/




        /**
         * 	展开tree
         */
        $('#btnExpand').click(function() {
            $._tree.expandAll(true);
            $(this).hide();
            $('#btnCollapse').show();
        });

        /**
         * 	收起tree
         */
        $('#btnCollapse').click(function() {
            $._tree.expandAll(false);
            $(this).hide();
            $('#btnExpand').show();
        });

        /**
         * 	刷新tree
         */
        $('#btnRefresh').click(function() {
            queryDeptTree(1);
        });

        var page = 1;//	当前页
		function first() {	//	首页
            queryDeptTree(1);
        }
        function prev(){	//	上页
		    if(page == 1){
            	queryDeptTree(1);
			}else{
                page = --page;
		        queryDeptTree(page);
			}
		}
		function next() {	//	下页
			if(page*15>count){
                return ;
			}else{
            	page = ++page;
				queryDeptTree(page);
			}
        }
        function last() {	//	末页
//			console.log("pageLast=="+pageLast)
            queryDeptTree(pageLast);
            page = pageLast;
        }


	</script>
</body>
</html>